<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="姓名" prop="username">
        <el-input
          v-model="queryParams.username"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="编号" prop="identifier">-->
<!--        <el-input-->
<!--          v-model="queryParams.identifier"-->
<!--          placeholder="请输入编号"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="出生日期" prop="birth">-->
<!--        <el-input-->
<!--          v-model="queryParams.birth"-->
<!--          placeholder="请输入出生日期"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="性别" prop="gender">-->
<!--        <el-input-->
<!--          v-model="queryParams.gender"-->
<!--          placeholder="请输入性别"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="年龄" prop="age">-->
<!--        <el-input-->
<!--          v-model="queryParams.age"-->
<!--          placeholder="请输入年龄"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="单位部门" prop="department">-->
<!--        <el-input-->
<!--          v-model="queryParams.department"-->
<!--          placeholder="请输入单位部门"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="身份证号" prop="idNumber">-->
<!--        <el-input-->
<!--          v-model="queryParams.idNumber"-->
<!--          placeholder="请输入身份证号"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="类别" prop="userCategory">-->
<!--        <el-input-->
<!--          v-model="queryParams.userCategory"-->
<!--          placeholder="请输入类别"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="名称" prop="dataname">
        <el-input
          v-model="queryParams.dataname"
          placeholder="请输入名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="第一责任人" prop="firstpeople">-->
<!--        <el-input-->
<!--          v-model="queryParams.firstpeople"-->
<!--          placeholder="请输入第一责任人"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="存放位置" prop="position">
        <el-input
          v-model="queryParams.position"
          placeholder="请输入存放位置"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-input
          v-model="queryParams.category"
          placeholder="请输入分类"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="二级分类" prop="secondclassify">-->
<!--        <el-input-->
<!--          v-model="queryParams.secondclassify"-->
<!--          placeholder="请输入二级分类"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="条码" prop="barcode">
        <el-input
          v-model="queryParams.barcode"
          placeholder="请输入条码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="归还状态" prop="givebackStatus">
        <el-select
          v-model="queryParams.givebackStatus"
          placeholder="请输入归还状态"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="dict in dict.type.yh_borrow_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="日期" prop="daydate">-->
<!--        <el-input-->
<!--          v-model="queryParams.daydate"-->
<!--          placeholder="请输入日期"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="附件" prop="enclosure">-->
<!--        <el-input-->
<!--          v-model="queryParams.enclosure"-->
<!--          placeholder="请输入附件"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="借阅操作员" prop="borrowOperator">-->
<!--        <el-input-->
<!--          v-model="queryParams.borrowOperator"-->
<!--          placeholder="请输入借阅操作员"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="借阅日期" prop="borrowDate">
<!--        <el-input-->
<!--          v-model="queryParams.borrowDate"-->
<!--          placeholder="请输入借阅日期"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
        <el-date-picker
          v-model="queryParams.borrowDate"
          type="date"
          placeholder="请输入借阅日期"
          style="width:184px"
          value-format="yyyy-MM-dd"
          @change="getFilterData"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="操作员" prop="givebackOperator">
        <el-input
          v-model="queryParams.givebackOperator"
          placeholder="请输入操作员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="归还日期" prop="givebackDate">-->
<!--        <el-input-->
<!--          v-model="queryParams.givebackDate"-->
<!--          placeholder="请输入归还日期"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="用户ID" prop="userId">-->
<!--        <el-input-->
<!--          v-model="queryParams.userId"-->
<!--          placeholder="请输入用户ID"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="部门ID" prop="deptId">-->
<!--        <el-input-->
<!--          v-model="queryParams.deptId"-->
<!--          placeholder="请输入部门ID"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="创建者" prop="createBy">-->
<!--        <el-input-->
<!--          v-model="queryParams.createBy"-->
<!--          placeholder="请输入创建者"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="创建时间" prop="createTime">-->
<!--        <el-date-picker clearable-->
<!--          v-model="queryParams.createTime"-->
<!--          type="date"-->
<!--          value-format="yyyy-MM-dd"-->
<!--          placeholder="请选择创建时间">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="更新者" prop="updateBy">-->
<!--        <el-input-->
<!--          v-model="queryParams.updateBy"-->
<!--          placeholder="请输入更新者"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="更新时间" prop="updateTime">-->
<!--        <el-date-picker clearable-->
<!--          v-model="queryParams.updateTime"-->
<!--          type="date"-->
<!--          value-format="yyyy-MM-dd"-->
<!--          placeholder="请选择更新时间">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:borrow:add']"
        >借阅登记</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['system:borrow:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['system:borrow:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:borrow:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="borrowList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="ID" align="center" prop="id" />-->
      <el-table-column label="ID" align="center" type="index" :ixdex="indexMethod" />
      <el-table-column label="姓名" align="center" prop="username" />
<!--      <el-table-column label="编号" align="center" prop="identifier" />-->
<!--      <el-table-column label="出生日期" align="center" prop="birth" />-->
<!--      <el-table-column label="性别" align="center" prop="gender" />-->
<!--      <el-table-column label="年龄" align="center" prop="age" />-->
<!--      <el-table-column label="单位部门" align="center" prop="department" />-->
<!--      <el-table-column label="身份证号" align="center" prop="idNumber" />-->
<!--      <el-table-column label="联系方式" align="center" prop="contacttype" />-->
<!--      <el-table-column label="类别" align="center" prop="userCategory" />-->
      <el-table-column label="名称" align="center" prop="dataname" />
<!--      <el-table-column label="第一责任人" align="center" prop="firstpeople" />-->
      <el-table-column label="存放位置" align="center" prop="position" />
      <el-table-column label="分类" align="center" prop="category" />
<!--      <el-table-column label="二级分类" align="center" prop="secondclassify" />-->
      <el-table-column label="条码" align="center" prop="barcode" />
<!--      <el-table-column label="日期" align="center" prop="daydate" />-->
<!--      <el-table-column label="附件" align="center" prop="enclosure" />-->
<!--      <el-table-column label="借阅操作员" align="center" prop="borrowOperator" />-->
      <el-table-column label="借阅日期" align="center" prop="borrowDate" />
      <el-table-column label="归还状态" align="center" prop="givebackStatus" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.yh_borrow_status" :value="scope.row.givebackStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作员" align="center" prop="borrowOperator" />
      <el-table-column label="归还日期" align="center" prop="givebackDate" />
<!--      <el-table-column label="用户ID" align="center" prop="userId" />-->
<!--      <el-table-column label="部门ID" align="center" prop="deptId" />-->
<!--      <el-table-column label="创建者" align="center" prop="createBy" />-->
<!--      <el-table-column label="创建时间" align="center" prop="createTime" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="更新者" align="center" prop="updateBy" />-->
<!--      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="备注" align="center" prop="remark" />-->
<!--      <el-table-column label="备注1" align="center" prop="note1" />-->
<!--      <el-table-column label="备注2" align="center" prop="note2" />-->
<!--      <el-table-column label="备注3" align="center" prop="note3" />-->
<!--      <el-table-column label="备注4" align="center" prop="note4" />-->
<!--      <el-table-column label="备注5" align="center" prop="note5" />-->
<!--      <el-table-column label="备注6" align="center" prop="note6" />-->
<!--      <el-table-column label="备注7" align="center" prop="note7" />-->
<!--      <el-table-column label="备注8" align="center" prop="note8" />-->
<!--      <el-table-column label="备注9" align="center" prop="note9" />-->
<!--      <el-table-column label="备注10" align="center" prop="note10" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['system:borrow:edit']"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['system:borrow:remove']"-->
<!--          >删除</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:borrow:update']"
            :style="{ display: scope.row.givebackStatus==1?'none':'' }">
          归还</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleView(scope.row)">
<!--            v-hasPermi="['system:borrow:query']"-->
            详细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form label-position="right" ref="form" :model="form"  :rules="rules"  label-width="120px">
        <el-container>

          <el-header height="30px">
            <el-divider content-position="left">
              <p style="color: #00afff; font-size: 18px;">资料类型</p>
            </el-divider>
          </el-header>
          <div style="height: 60px">
          <el-main>
            <el-col :span="8">
              <el-form-item label="资料类型" prop="note1">
            <span slot="label">
              资料类型
              </span>
                <el-radio-group v-model="form.note1" >
                  <el-radio label="0" >地图</el-radio>
                   <el-radio label="1" >资料</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-main>
  </div>
        </el-container>
        <el-container>
          <div id="0" style="height: 160px;width: 100%" v-if="form.note1 == '0'">
            <el-header height="10px">
              <el-divider content-position="left">
                <p style="color: #00afff; font-size: 18px;">地图信息</p>
              </el-divider>
            </el-header>
            <el-main>
              <el-col :span="12" >
                <el-form-item label="条码" prop="barcode">
                  <el-autocomplete
                    style="width: 100%"
                    placeholder="请输入条码"
                    v-model="form.barcode"
                    :fetch-suggestions="querySearchAsync2"
                    @select="handleSelect2"
                  >
                  </el-autocomplete>
                </el-form-item>
                <el-form-item label="存放位置" prop="position">
                  <el-input  v-model="form.position" placeholder="请输入存放位置" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item label="分类" prop="category">
                  <el-input v-model="form.category" placeholder="请输入分类" style="width: 100%"/>
                </el-form-item>

                <el-form-item label="名称" prop="dataname">
                  <el-input v-model="form.dataname" placeholder="请输入名称" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-main>
          </div>

          <div id="1" style="height: 160px;width: 100%" v-if="form.note1 == '1'" >
            <el-header height="10px">
              <el-divider content-position="left">
                <p style="color: #00afff; font-size: 18px;">资料信息</p>
              </el-divider>
            </el-header>
            <el-main>
              <el-col :span="12" >
                <el-form-item label="条码" prop="barcode">
                  <el-autocomplete
                    style="width: 100%"
                    placeholder="请输入条码"
                    v-model="form.barcode"
                    :fetch-suggestions="querySearchAsync3"
                    @select="handleSelect3"
                  >
                  </el-autocomplete>
                </el-form-item>
                <el-form-item label="存放位置" prop="position">
                  <el-input v-model="form.position" placeholder="请输入存放位置" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item label="分类" prop="category">
                  <el-input v-model="form.category" placeholder="请输入分类" style="width: 100%"/>
                </el-form-item>

                <el-form-item label="名称" prop="dataname">
                  <el-input v-model="form.dataname" placeholder="请输入名称" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-main>
          </div>
        </el-container>
        <el-container>
          <div style="height: 160px;width: 100%">
          <el-header height="10px">
            <el-divider content-position="left">
              <p style="color: #00afff; font-size: 18px;">借阅人员信息</p>
            </el-divider>
          </el-header>
          <el-main>
            <el-col :span="12" >
              <el-form-item label="姓名" prop="username">
                <el-autocomplete
                  style="width: 100%"
                  placeholder="请输入姓名"
                  v-model="form.username"
                  :fetch-suggestions="querySearchAsync"
                  @select="handleSelect"
                >
                </el-autocomplete>
              </el-form-item>
                <el-form-item label="身份证号" prop="idNumber">
                  <el-input v-model="form.idNumber" placeholder="请输入身份证号" style="width: 100%"/>
                </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="编号" prop="identifier">
                <el-input v-model="form.identifier" placeholder="请输入编号" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="联系方式" prop="contacttype">
                <el-input v-model="form.contacttype" placeholder="请输入联系方式" style="width: 100%"/>
              </el-form-item>
            </el-col>
          </el-main>
          </div>
        </el-container>
        <el-container>
          <div style="height: 100px;width: 100%">
          <el-header height="10px">
            <el-divider content-position="left">
              <p style="color: #00afff; font-size: 18px;">借阅信息</p>
            </el-divider>
          </el-header>
          <el-main>
            <el-col :span="12" >
              <el-form-item label="借阅日期" prop="borrowDate">
                <el-date-picker clearable
                                v-model="form.borrowDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请输入借阅日期"
                                style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
<!--           <el-col :span="12" >-->
<!--            <el-form-item label="归还日期" prop="givebackDate">-->
<!--              <el-date-picker clearable-->
<!--                              v-model="form.givebackDate"-->
<!--                              type="date"-->
<!--                              value-format="yyyy-MM-dd"-->
<!--                              placeholder="请输入归还日期"-->
<!--                              style="width: 100%">-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
<!--            </el-col>-->
          </el-main>
          </div>
        </el-container>
      </el-form>
      <div slot="footer" class="dialog-footer" style="height: 30px">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


<!--    归还-->
    <el-dialog :close-on-click-modal="false" :title="xg.title" :visible.sync="xg.open" width="900px" append-to-body>
      <el-form label-position="right" ref="form" :model="form"  :rules="rules"  label-width="120px">
        <el-container>
          <div id="1" style="height: 160px;width: 100%">
            <el-header height="10px">
              <el-divider content-position="left">
                <p style="color: #00afff; font-size: 18px;">物品信息</p>
              </el-divider>
            </el-header>
            <el-main>
              <el-col :span="12" >
                <el-form-item label="条码" prop="barcode">
                  <el-input
                    readonly="readonly"
                    style="width: 100%"
                    placeholder="请输入条码"
                    v-model="form.barcode"
                    :fetch-suggestions="querySearchAsync3"
                    @select="handleSelect3"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="存放位置" prop="position">
                  <el-input readonly="readonly" v-model="form.position" placeholder="请输入存放位置" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item label="分类" prop="category">
                  <el-input readonly="readonly" v-model="form.category" placeholder="请输入分类" style="width: 100%"/>
                </el-form-item>

                <el-form-item label="名称" prop="dataname">
                  <el-input readonly="readonly" v-model="form.dataname" placeholder="请输入名称" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-main>
          </div>
        </el-container>
        <el-container>
          <div style="height: 160px;width: 100%">
          <el-header height="10px">
            <el-divider content-position="left">
              <p style="color: #00afff; font-size: 18px;">借阅人员信息</p>
            </el-divider>
          </el-header>
          <el-main>
            <el-col :span="12" >
              <el-form-item label="姓名" prop="username">
                <el-input
                  readonly="readonly"
                  style="width: 100%"
                  placeholder="请输入姓名"
                  v-model="form.username"
                  :fetch-suggestions="querySearchAsync"
                  @select="handleSelect"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idNumber">
                <el-input readonly="readonly" v-model="form.idNumber" placeholder="请输入身份证号" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="编号" prop="identifier">
                <el-input readonly="readonly" v-model="form.identifier" placeholder="请输入编号" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="联系方式" prop="contacttype">
                <el-input readonly="readonly" v-model="form.contacttype" placeholder="请输入联系方式" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <!--  <el-col :span="12" >
                <el-form-item label="发放状态" prop="releaseStatus">
                  <el-select
                    style="width: 100%"
                    v-model="form.releaseStatus"
                    placeholder="请选择发放状态"
                    clearable
                  >
                    <el-option
                      v-for="dict in dict.type.yh_release_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item label="发放日期" prop="releaseDate">
                  <el-date-picker clearable
                                  v-model="form.releaseDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择发放日期"
                                  style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item label="注销日期" prop="disableDate">
                  <el-date-picker clearable
                                  v-model="form.disableDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择注销日期"
                                  style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="12" >

                <el-form-item label="启用日期" prop="commissioningDate">
                  <el-date-picker clearable
                                  v-model="form.commissioningDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择启用日期"
                                  style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" >
                <el-form-item label="停用日期" prop="closeDate">
                  <el-date-picker clearable
                                  v-model="form.closeDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择停用日期"
                                  style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" style="width: 100%"/>
                </el-form-item>
              </el-col>-->
          </el-main>
          </div>
        </el-container>
        <el-container>
          <div style="height: 100px;width: 100%">
          <el-header height="10px">
            <el-divider content-position="left">
              <p style="color: #00afff; font-size: 18px;">借阅信息</p>
            </el-divider>
          </el-header>
          <el-main>
            <el-col :span="12" >
              <el-form-item label="借阅日期" prop="borrowDate">
                <el-date-picker clearable
                                v-model="form.borrowDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请输入借阅日期"
                                style="width: 100%"
                readonly="readonly">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="归还日期" prop="givebackDate">
                <el-date-picker clearable
                                v-model="form.givebackDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请输入归还日期"
                                style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
           <!-- <el-col :span="12" >
              <el-form-item label="操作员" prop="contacttype">
                <el-input v-model="form.givebackOperator" placeholder="请输入操作员" style="width: 100%"/>
              </el-form-item>
            </el-col>-->
          </el-main>
          </div>
        </el-container>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBorrow, getBorrow, delBorrow, addBorrow, updateBorrow } from "@/api/group/lyq/borrow";
import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo } from "@/api/group/sb/baseinfo";
import { listMap, getMap, delMap, addMap, updateMap } from "@/api/group/whd/map";
import { listDatum, getDatum, delDatum, addDatum, updateDatum } from "@/api/group/lck/datum";




export default {
  name: "Borrow",
  dicts:['yh_borrow_status',],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      borrowList: [],
      baseInfoList: [],
      InfoList:[],
      dataListList:[],
      //修改
      xg:{
        // 是否显示弹出层（用户查询）
        open: false,
        // 弹出层标题（用户查询）
        title: ""
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        username: null,
        identifier: null,
        birth: null,
        gender: null,
        age: null,
        department: null,
        idNumber: null,
        contacttype: null,
        userCategory: null,
        dataname: null,
        firstpeople: null,
        position: null,
        category: null,
        secondclassify: null,
        barcode: null,
        daydate: null,
        enclosure: null,
        borrowOperator: null,
        borrowDate: null,
        givebackStatus: null,
        givebackOperator: null,
        givebackDate: null,
        userId: null,
        deptId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {
        borrowDate:this.getNowTime(),
      },
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
    this.getBaseInfo();
    this.getInfo();
    this.getNowTime();
    this.getdataInfo();
  },

  methods: {
    getFilterData() {
      this.$emit('getFilterData', this.form.daydate)
    },
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
    },
    /*自动补全*/
//生成表头序号
    indexMethod(index){
      return index+1;
    },
    //下拉列表获取所有用户基本信息
    getBaseInfo() {
      listBaseinfo().then(response => {
        this.baseInfoList = response.rows;
        console.log('baseInfoList '+this.baseInfoList)
      });
    },


    //
    getInfo() {
      listMap().then(response => {
        this.InfoList = response.rows;
        console.log('InfoList '+this.InfoList)
      });
    },
    getdataInfo() {
      listDatum().then(response => {
        this.dataListList = response.rows;
        console.log('InfoList '+this.InfoList)
      });
    },
    //queryString 为在框中输入的值
    //cb 回调函数，将处理好的数据推回
    querySearchAsync2(queryString, cb) {
      let InfoJson= JSON.parse(JSON.stringify(this.InfoList).replace(/barcode/g,"value"));
      let results = queryString ? InfoJson.filter(this.createStateFilter(queryString)) : InfoJson;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 0.5*1000);
    },
    //根据输入的字段进行筛选
    createStateFilter2(queryString) {
      return (state) => {
        return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    //将其他数据自动补全，采用覆盖的方法
    handleSelect2(item){
      this.form.barcode = item.value;
      this.form.position=item.position;
      this.form.dataname=item.dataname;
      this.form.category=item.category;


    },


    //queryString 为在框中输入的值
    //cb 回调函数，将处理好的数据推回
    querySearchAsync(queryString, cb) {
      let baseInfoJson= JSON.parse(JSON.stringify(this.baseInfoList).replace(/username/g,"value"));
      console.log('baseInfoJson '+baseInfoJson)
      let results = queryString ? baseInfoJson.filter(this.createStateFilter(queryString)) : baseInfoJson;
      console.log('results '+results)
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 0.5*1000);
    },
    //根据输入的字段进行筛选
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    //将其他数据自动补全，采用覆盖的方法
    handleSelect(item){
      this.form.username = item.value;
      this.form.identifier=item.identifier;
      this.form.idNumber = item.idNumber;
      this.form.contacttype=item.contacttype;


    },
    //queryString 为在框中输入的值
    //cb 回调函数，将处理好的数据推回
    querySearchAsync1(queryString, cb) {
      let baseInfoJson= JSON.parse(JSON.stringify(this.baseInfoList).replace(/username/g,"value"));
      console.log('baseInfoJson '+baseInfoJson)
      let results = queryString ? baseInfoJson.filter(this.createStateFilter1(queryString)) : baseInfoJson;
      console.log('results '+results)
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 0.5*1000);
    },
    //根据输入的字段进行筛选
    createStateFilter1(queryString) {
      return (state) => {
        return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    //将其他数据自动补全，采用覆盖的方法
    handleSelect1(item){
      this.form.managerName = item.value;
      this.form.managerIdNumber=item.idNumber;
    },

    /**/
//queryString 为在框中输入的值
//cb 回调函数，将处理好的数据推回
    querySearchAsync3(queryString, cb) {
      let InfoJson= JSON.parse(JSON.stringify(this.dataListList).replace(/barcode/g,"value"));
      let results = queryString ? InfoJson.filter(this.createStateFilter3(queryString)) : InfoJson;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 0.5*1000);
    },
//根据输入的字段进行筛选
    createStateFilter3(queryString) {
      return (state) => {
        return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

//将其他数据自动补全，采用覆盖的方法
    handleSelect3(item){
      this.form.barcode = item.value;
      this.form.position=item.position;
      this.form.dataname=item.dataname;
      this.form.category=item.category;


    },














    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listBorrow(this.queryParams).then(response => {
        this.borrowList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.xg.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        username: null,
        identifier: null,
        birth: null,
        gender: null,
        age: null,
        department: null,
        idNumber: null,
        contacttype: null,
        userCategory: null,
        dataname: null,
        firstpeople: null,
        position: null,
        category: null,
        secondclassify: null,
        barcode: null,
        daydate: null,
        enclosure: null,
        borrowOperator: null,
        borrowDate: null,
        givebackStatus: "0",
        givebackOperator: null,
        givebackDate: null,
        userId: null,
        deptId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 详细按钮操作 */
    handleView(row) {
      const id = row.id || this.ids
      getBorrow(id).then(response => {
        this.form = response.data;
        this.$router.push({ path:"/borrow/detail", query: {id}});
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.form.borrowDate=this.getNowTime();
      this.title = "登记";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getBorrow(id).then(response => {
        this.form = response.data;
        this.xg.open = true;
        this.xg.title = "归还";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.form.givebackStatus=1;
            updateBorrow(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.xg.open = false;
              this.getList();
            });
          } else {
            addBorrow(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除?').then(function() {
        return delBorrow(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/borrow/export', {
        ...this.queryParams
      }, `borrow_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
